<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>身体健康最重要</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/weui/1.1.1/style/weui.min.css">
    <link rel="stylesheet" href="//cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">
    <link rel="stylesheet" href="static/css/icon-font.css">
    <style type="text/css">
        body {
            line-height: 1.2em;
            text-align: center;
        }

        .weui-tabbar__label {
            line-height: 1.2em;
        }

        .header_title {
            text-align: center;
            font-size: 26px;
            line-height: 1.5em;
            color: #3cc51f;
            font-weight: 200;
            margin: 24px 15%;
        }

        .header_desc {
            padding: 0 20px 20px 20px;
        }
    </style>
</head>
<body ontouchstart>
    <div class="weui-tab">
        <div class="weui-tab__bd">
            <div id="tab1" class="weui-tab__bd-item">
                <div style="margin: 0 auto">
                    <div class="weui-media-box__bd">
                        <h4 class="weui-media-box__title header_title">体温监测</h4>
                    </div>
                    <div id="temp-charts"></div>
                </div>
            </div>
            <div id="tab2" class="weui-tab__bd-item weui-tab__bd-item--active">
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title header_title">体温记录</h4>
                    <p class="weui-media-box__desc header_desc">为拥有健康的好身体，坚持，加油！</p>
                </div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">日期</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="text" id="addDate" />
                        </div>
                    </div>
                    <div class="weui-cell">
                        <div class="weui-cell__hd"><label class="weui-label">体温</label></div>
                        <div class="weui-cell__bd">
                            <input class="weui-input" type="number" id="addTemp"
                                   placeholder="亲爱的,记得量体温哟^_^"
                                   pattern="^(\+|-)?[1-9]?[0-9](\.[0-9]+)?$"/>
                        </div>
                    </div>
                </div>
                <div class="weui-btn-area" style="margin-top: 28px">
                    <a class="weui-btn weui-btn_primary" href="javascript:" id="addNewTemp">确定</a>
                </div>
            </div>
            <div id="tab3" class="weui-tab__bd-item">
                <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title header_title">关于</h4>
                    <div style="margin: 0 auto">
                        <img src="static/img/love.jpg"
                             style="width:180px;height: 180px;border-radius: 80%;border:1px dashed #586c94;">
                    </div>
                    <div style="margin-top: 30px">
                        <p class="weui-media-box__title" style="font-size: 26px;line-height: 1.6em">Love You Forever.</p>
                    </div>
                    <div class="weui-footer weui-footer_fixed-bottom" style="bottom: 80px;">
                        <p class="weui-footer__links">
                            <a href="#" class="weui-footer__link">小灰灰</a>
                        </p>
                        <p class="weui-footer__text">Copyright © 2017 版本号1.0</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="weui-tabbar">
        <a href="javascript:;"  id="tab_item1" class="weui-tabbar__item">
            <span style="display: inline-block;position: relative;padding-top: 3px;">
                <i class="icon-font icon-line-chart"></i>
                <span class="weui-badge" style="position: absolute;top: -2px;right: -13px;">1</span>
            </span>
            <p class="weui-tabbar__label">图表</p>
        </a>
        <a href="javascript:;" id="tab_item2" class="weui-tabbar__item weui-bar__item_on">
            <i class="icon-font icon-add icon-font-color"></i>
            <p class="weui-tabbar__label">记录</p>
        </a>
        <a href="javascript:;" id="tab_item3" class="weui-tabbar__item">
            <span style="display: inline-block;position: relative;padding-top: 3px;">
                <i class="icon-font icon-about"></i>
                <span class="weui-badge weui-badge_dot"></span>
            </span>
            <p class="weui-tabbar__label">关于</p>
        </a>
    </div>

    <script src="//cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="//cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>
    <script src="static/js/echarts.common.min.js" charset="UTF-8"></script>
    <script src="static/js/index.js" charset="UTF-8"></script>
</body>
</html>
